<template>
  <div class="page-table">
    <div class="page-filter">
      <div class="search-wrapper">
<!--        <div class="condition">-->
<!--          <div class="tabs">-->
<!--            <div class="tab" :class="{on: curTab == 0}" @click="curTab = 0">结算人</div>-->
<!--            <div class="tab" :class="{on: curTab == 1}" @click="curTab = 1">运单号</div>-->
<!--            <div class="tab" :class="{on: curTab == 2}" @click="curTab = 2">网点</div>-->
<!--          </div>-->
<!--          <div class="time">-->
<!--            <el-date-picker v-model="searchQuery.beginSearchTime" placeholder="请选择开始时间" value-format="timestamp" format="yyyy-MM-dd HH:mm" type="datetime" clearable size="mini"/>-->
<!--            <el-date-picker v-model="searchQuery.endSearchTime" placeholder="请选择结束时间" value-format="timestamp" format="yyyy-MM-dd HH:mm" type="datetime" clearable size="mini"/>-->
<!--          </div>-->
<!--        </div>-->
        <div class="search">
          <div class="time" style="display: flex">
            <el-date-picker v-model="searchQuery.beginSearchTime" placeholder="请选择开始时间" value-format="timestamp" format="yyyy-MM-dd HH:mm" type="datetime" clearable size="mini"/>
            <el-date-picker v-model="searchQuery.endSearchTime" placeholder="请选择结束时间" value-format="timestamp" format="yyyy-MM-dd HH:mm" type="datetime" clearable size="mini"/>
          </div>
          <el-select v-if="curTab == 0" class="input" placeholder="按结算人姓名、电话、公司名称进行搜索" v-model="preSearchQuery.settlementIdList" remote multiple collapse-tags reserve-keyword clearable filterable size="mini"
                     :loading="settlementSearching" :remote-method="getSettlementList" @change="selChange">
            <el-option v-for="settlement in settlementList" :label="settlement.companyName" :value="settlement.linkmanId" :key="settlement.linkmanId">
              <div v-show="settlement.type ==1">公司：{{settlement.companyName}}　/　姓名：{{settlement.linkmanName}}　/　电话：{{settlement.linkmanPhone}}</div>
              <div v-show="settlement.type ==2">网点：{{settlement.linkmanName}}</div>
              <div v-show="settlement.type ==3">运单：{{settlement.linkmanName}}</div>
            </el-option>
          </el-select>
<!--          <el-input v-else-if="curTab == 1" class="input" placeholder="请输入运单号" v-model="preSearchQuery.transportNo" size="mini">
            <template slot="prepend">Y</template>
          </el-input>
          <el-select v-else-if="curTab == 2" class="input" placeholder="请选择网点" v-model="preSearchQuery.siteIdList" multiple clearable filterable size="mini">
            <el-option v-for="site in siteList" :label="site.name" :value="site.id"/>
          </el-select>-->
<!--          <el-button class="btn" icon="el-icon-search" type="primary" plain :disabled="!canSearch" :loading="searching" @click="search" size="mini">查询</el-button>-->
          <el-button plain size="small" type="primary" @click="search" :disabled="!canSearch" :loading="searching" style="position: relative;top: -2px">查询
          </el-button>
        </div>
      </div>
      <div class="op">
        <el-button size="mini" type="primary" plain :disabled="cannotEdit" @click="settlement">结算</el-button>
        <el-button size="mini" type="primary" plain :loading="downloading" @click="exportExcel">导出</el-button>
      </div>
    </div>
    <ad-table ref="order" class="multi-select"
              :data="orderList" :show-summary="orderSummary" v-loading="orderInitLoading" border u-table :data-changes-scroll-top="orderIsScrollTop"
              @row-click="orderSelectRow" @selection-change="orderSelectRows"
              :searchQuery="searchQuery" @search="orderGetInitList"
              @sort-change="orderSortInitList" @filter-change="orderFilterInitList"
              :height="tableHeight">
      <!--      v-el-table-infinite-scroll="orderGetMoreList" :infinite-scroll-distance="600"-->
      <!--      :infinite-scroll-disabled="orderComplete"-->
      <ad-table-column type="selection" ctype="selection" fixed />
      <ad-table-column label="序号" type="index" ctype="index" />
      <ad-table-column label="订单编号" prop="orderSubNo" ctype="orderNo" searchable w="4c1f" href="/order/detail" id="orderId" />
      <ad-table-column label="运单号" prop="transportNo" searchable/>
      <ad-table-column label="制单人" prop="createUserName" searchable w="4c1f" sortable/>
      <ad-table-column label="制单时间" prop="createTime" ctype="datetime" sortable/>
      <ad-table-column label="出发地" prop="startCode" sortable ctype="city"/>
      <ad-table-column label="目的地" prop="destinationCode" sortable ctype="city"/>
      <ad-table-column label="运输方式" prop="transportType" dictName="transport_way"/>
      <ad-table-column label="车辆名称" prop="carName" searchable w="4c1f"/>
      <ad-table-column label="车架号" prop="vin" ctype="vin-2f" searchable w="4c1f"/>
      <ad-table-column label="应结款" prop="financeCheck" w="4c"/>
      <ad-table-column label="未收运费" prop="unCollection" w="4c"/>
      <ad-table-column label="未付商务费" prop="kickbackUn" w="5c"/>
      <ad-table-column label="未付提车费" prop="pickUn" w="5c" />
      <ad-table-column label="未付承运费" prop="transportUn" w="5c"/>
      <ad-table-column label="未付送车费" prop="takeUn" w="5c"/>
      <ad-table-column label="未付其他费用" prop="otherUn" w="6c"/>
      <ad-table-column label="未付费用合计" prop="unPayment" w="6c"/>
      <ad-table-column label="订单备注" prop="orderRemark" ctype="remark"/>
      <ad-table-column label="发车时间" prop="transportTime" ctype="datetime" w="1f"/>
      <ad-table-column label="司机姓名" prop="driverName" searchable w="4c1f"/>
      <ad-table-column label="大板车牌" prop="licensePlateNumber" searchable w="4c1f"/>
      <ad-table-column label="客户" prop="customerName" searchable w="4c1f"/>
      <ad-table-column label="联系电话" prop="customerPhone" searchable w="4c1f"/>
      <ad-table-column label="收货人" prop="consigneeName" searchable w="4c1f"/>
      <ad-table-column label="联系电话" prop="consigneePhone" searchable w="4c1f"/>
    </ad-table>
  </div>
</template>

<script>
import qs from 'qs'
import AdDatetimeRange from '@/components/AdDateTimeRange'
import AdTable from '@/components/AdTable'
import AdTableColumn from '@/components/AdTable/AdTableColumn'
import dateRange from '@/utils/dateRange'
import { isArray } from '@/utils/type'
import adTable from '@/mixins/adTable/index'
import { getQueryVar } from '@/utils/url'
import {getList as orderApiGetList} from '@/api/finance/check/wait'
import {getCompanyListAll as getSuggestCompanyList} from '@/api/suggestion'
import {getList as getSiteList} from '@/api/site/all'
import {getList as getSettlementList} from '@/api/finance/check/linkman'
import { downloadFile } from '@/utils'
import { download } from '@/api/data'
import { getFinanceCheckSummary } from '@/api/order/complete'

export default {
  name: 'finance-wait-index',
  components: { AdDatetimeRange, AdTable, AdTableColumn  },
  dicts: ['order_status','payment_type','pickcar_type','takecar_type','transport_way'],
  mixins: [adTable([{name: 'order'}])],
  data() {
    return {
      curTab: 0,
      settlementSearching: false,
      searching: false,
      searchQuery: {
        beginSearchTime: '',
        endSearchTime: '',
        settlementIdList: [],
        transportNo: '',
      },
      preSearchQuery: {
        beginSearchTime: '',
        endSearchTime: '',
        settlementIdList: [],
        siteIdList: [],
        transportNo: '',
      },
      siteList: [],
      settlementList: [],
      tableHeight: document.documentElement.clientHeight - 180,
      query: {
        settlementName: getQueryVar('name') ? decodeURI(getQueryVar('name')) : '',
        transportNo: '',
        settlementIdList: []
      },
      downloading: false
    }
  },
/*   async created() {
    this.siteList = (await getSiteList()).data
    if (this.$store.state.page.finance.check.wait.query) {
      const query = this.$store.state.page.finance.check.wait.query
      this.curTab = query.curTab
      this.preSearchQuery.beginSearchTime = query.beginSearchTime
      this.preSearchQuery.endSearchTime = query.endSearchTime
      this.searchQuery.beginSearchTime = query.beginSearchTime
      this.searchQuery.endSearchTime = query.endSearchTime
      this.preSearchQuery.transportNo = query.transportNo
      this.preSearchQuery.siteIdList = query.siteIdList
      if (query.settlementIdList.length > 0) {
        this.settlementList = (await getSettlementList({linkmanIds: query.settlementIdList})).data
        this.preSearchQuery.settlementIdList = query.settlementIdList
      }
      switch (query.curTab) {
        case 0:
          this.searchQuery.settlementIdList = this.preSearchQuery.settlementIdList
          break
        case 1:
          this.searchQuery.checkTransportNo = this.preSearchQuery.transportNo
          break
        case 2:
          this.searchQuery.settlementIdList = this.preSearchQuery.siteIdList
          break
      }
    }
    this.orderGetInitList()
  }, */
  computed: {
    canSearch() {
      switch (this.curTab) {
        case 0:
          return this.preSearchQuery.settlementIdList.length > 0
        case 1:
          return !!this.preSearchQuery.transportNo
        case 2:
          return this.preSearchQuery.siteIdList.length > 0
      }
    },
    cannotEdit() {
      return this.orderSelectedRows.length == 0
    }
  },

  watch: {
    // curTab() {
    //   this.searchQuery.settlementIdList = []
    //   this.searchQuery.transportNo = ''
    // },
    'searchQuery.settlementIdList'(ids) {
      console.log(ids)
      this.query.settlementIdList = ids.map(item => item[item.length - 1])
    }
  },
  methods: { orderApiGetList,
    selChange(val){
      this.searchQuery.settlementIdList = val
    },
    search() {
      this.setQuery()
      this.orderGetInitList()
    },
    setQuery() {
      this.searchQuery.checkTransportNo = ''
      switch (this.curTab) {
        case 0:
          this.searchQuery.settlementIdList = this.preSearchQuery.settlementIdList
          break
        case 1:
          this.searchQuery.checkTransportNo = this.preSearchQuery.transportNo
          break
        case 2:
          this.searchQuery.settlementIdList = this.preSearchQuery.siteIdList
          break
      }
    },
    settlement() {
      this.$router.push({
        path: '/finance/settlement',
        query: {
          /*name: crud.query.settlementName,*/
          settlementIdList: qs.stringify({settlementIdList: this.searchQuery.settlementIdList}, {indices: false}),
          ids: JSON.stringify(this.orderSelectedRows.map(row => row.orderId)),
          beginSearchTime: this.searchQuery.beginSearchTime,
          endSearchTime: this.searchQuery.endSearchTime,
          checkTransportNo: this.preSearchQuery.transportNo,
          orderSearchQuery: qs.stringify(this.orderSearchQuery)
        }
        // query: {
        //   ids: this.orderSelectedRows.map(row => row.orderId),
        //   settlementIdList: qs.stringify({settlementIdList: this.orderSelectedRows.map(row => row.orderId)}, {indices: false})
        // }
      })
    },
    exportExcel() {
      this.downloading = true
      this.setQuery()
      download('/api/finance/check/download', {
        ...this.searchQuery,
        ...this.orderSearchQuery,
      }).then(result => {
        downloadFile(result.data, result.headers.downloadFileName, 'xlsx')
      }).finally(() => {
        this.downloading = false
      })
    },
    getSettlementList(name='') {

      console.log('getSettlementList')
        this.settlementSearching = true
        getSuggestCompanyList({unionCondition: name}).then(res => {
          this.settlementList = res.data
        }).finally(() => {
          this.settlementSearching = false
        })

    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-select .el-tag__close.el-icon-close { top: 1px; }
.page-filter { align-items: flex-end; }
.search-wrapper {
  .title { display: flex; margin-bottom: 30px; justify-content: center; align-items: center; font-size: 18px; color: #141414; font-weight: bold; }
  .condition { display: flex; margin-bottom: 10px;
    .tabs { display: flex; font-size: 12px;
      .tab { margin-right: 14px; padding: 8px 4px 0; border-bottom: 2px solid transparent; cursor: pointer; }
      .tab.on { border-bottom: 2px solid #1F89EB; }}
    .time { margin-left: 10px;
      ::v-deep .el-date-editor { width: 154px;
        .el-input__inner { height: 34px; padding-left: 20px; padding-right: 0; border: none; }
        .el-input__prefix { left: 0; .el-icon-time { display: flex; align-items: center; }}
        .el-input__suffix .el-input__icon { display: flex; width: 16px; align-items: center; }}}}
  .search { display: flex; width: 800px;
    .input { flex: 1;
      ::v-deep .el-input__inner { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }}
    .btn {
      ::v-deep { border-top-left-radius: 0; border-bottom-left-radius: 0; }}}}
</style>